<template>

  <div class="main_bottom">
    <div class="main_left">
      <div class="menu_item" id="userConfiguration.userManagement" :style="{background:selectMenu===1?'#F0F3F8':'#fff',color:selectMenu===1?'#116DEE':'#2A2A2A'}" @click="checkMenu(1)">用户管理</div>
      <div class="menu_item" id="userConfiguration.permissionConfiguration" :style="{background:selectMenu===2?'#F0F3F8':'#fff',color:selectMenu===2?'#116DEE':'#2A2A2A'}" @click="checkMenu(2)">权限配置</div>
      <!-- <div class="menu_item" :style="{background:selectMenu===3?'#F0F3F8':'#fff',color:selectMenu===3?'#116DEE':'#2A2A2A'}" @click="checkMenu(3)">参数设置</div> -->
    </div>
    <div class="main_right" v-if="selectMenu===1">
      <div class="main_content">
        <div class="content_top">
          <!--          <div class="content_list" @click="addUser">添加工号用户</div>-->
          <el-button class="" @click="addUser" type="primary">添加工号用户</el-button>
          <!-- <div class="content_list" style="margin-right: 10px;">添加刷卡用户</div>
          <div class="content_list" style="margin-right: 10px;">添加指纹用户</div> -->
        </div>
        <div class="main_table">
          <el-table
            :data="userData"
            :header-cell-style="{'font-weight':'bold', color:'#2A2A2A'}"
            border
            style="width: 100%">

            <el-table-column
              prop="userId"

              label="账号">
            </el-table-column>
            <el-table-column
              prop="userOtherID"

              label="工号">
            </el-table-column>
            <el-table-column
              prop="userName"

              label="员工姓名">
            </el-table-column>
            <el-table-column
              label="用户权限">
              <template slot-scope="scope">
                <div v-if="scope.row.userType===1">操作员</div>
                <div v-if="scope.row.userType===2">技术员</div>
                <div v-if="scope.row.userType===3">管理员</div>
                <div v-if="scope.row.userType===99">超级管理员</div>
              </template>
            </el-table-column>

            <el-table-column
              label="操作">
              <template slot-scope="scope">

                <div style="color:rgb(242, 53, 65);cursor: pointer;float:left"  @click="deleteItem(scope.row)">删除</div>
                <!-- <div style="color:rgb(17, 109, 238);cursor: pointer;float:left;margin-left: 20px"  @click="edit(scope.row)">编辑</div> -->
              </template>
            </el-table-column>
          </el-table>

        </div>
      </div>
    </div>
    <div class="main_right" v-if="selectMenu===2">
      <PermissionConfiguration :qtCall="qtCall"></PermissionConfiguration>
    </div>
    <div class="form">
      <el-dialog title="添加工号用户" :visible.sync="userVisible">
        <el-form :model="user">

          <el-form-item label="账号" :label-width="formLabelWidth">
            <el-input placeholder="请输入用户账号" v-model="user.accout"></el-input>
          </el-form-item>
          <el-form-item label="工号" :label-width="formLabelWidth">
            <el-input placeholder="请输入工号"  v-model="user.number"></el-input>
          </el-form-item>
          <el-form-item label="员工姓名" :label-width="formLabelWidth">
            <el-input placeholder="请输入员工姓名"  v-model="user.userName"></el-input>
          </el-form-item>
          <el-form-item label="角色" :label-width="formLabelWidth">
            <el-select v-model="user.role" placeholder="请选择角色">
              <el-option
                v-for="item in roleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input placeholder="请输入密码"  v-model="user.passwd"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="userVisible = false">取 消</el-button>
          <el-button type="primary"  @click="confirmUser">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import qwebchannel from '../../qt5.15webchannel.js';
import PermissionConfiguration from "../user/PermissionConfiguration";
import { Message } from 'element-ui';
import { validPermision } from '../../utils/tools.js';

export default {
  name: 'BoneDen',
  components: {PermissionConfiguration},
  data() {
    return {
      selectMenu: 1,
      dialogFormVisible:false,
      userVisible:false,
      formLabelWidth: '100px',
      qtCall:null,
      type:1,
      userData:[
        // {
        //     userId:"user1",//账号
        //     userOtherID:"072614",//工号
        //     userName:"汉三",//用户名称
        //     userType:1,//用户权限
        //     passwd:"mima123",
        //     des:"备注信息"//备注
        // },
        // {
        //     userId:"user2",//账号
        //     userOtherID:"072614",//工号
        //     userName:"汉四",//用户名称
        //     userType:2,//用户权限
        //     passwd:"mima123",
        //     des:"备注信息"//备注
        // },
        // {
        //     userId:"user3",//账号
        //     userOtherID:"072614",//工号
        //     userName:"汉五",//用户名称
        //     userType:3,//用户权限
        //     passwd:"mima123",
        //     des:"备注信息"//备注
        // },
        // {
        //     userId:"user3",//账号
        //     userOtherID:"072614",//工号
        //     userName:"汉五",//用户名称
        //     userType:4,//用户权限
        //     passwd:"mima123",
        //     des:"备注信息"//备注
        // }
      ],

      user:{
        userName:'',
        accout:'',
        number:'',
        role:'',
        passwd:''
      },
      roleList:[
        {
          label:'操作员',
          value:1
        },
        {
          label:'技术员',
          value:2
        },
        {
          label:'管理员',
          value:3
        },
        {
          label:'超级管理员',
          value:99
        },
      ],
      data: {
        realData: [//实时样本数据
// {'qrcode': 89898989}
        ]
      }
    }
  },
  created() {

  },
  mounted() {
    validPermision(this.selectMenu)
    if (process.env.NODE_ENV === 'production') {
      // new qwebchannel.QWebChannel(qt.webChannelTransport, (channel) => {
      //   this.qtCall = channel.objects.webBridge;
        this.qtCall = this.$qtCall
        this.refreshData();
      // });
    }
  },
  methods: {
    refreshData(data) {
      this.qtCall.JsToQt("NeedQueryUsersList", '');//可以传给qt
      this.qtCall.QtToJs.connect((func,json) => {
        if(func==="RefreshUsersList"){
          const datas = JSON.parse(json)
          if (datas.code === 200) {
            this.userData = datas.data.user
          }
        }
      })
    },
    edit(val){
      this.type = 2
      this.user.userName = val.userName
      this.user.accout = val.userId
      this.user.number = val.userOtherID
      this.user.role = val.userType

      this.userVisible = true
    },
    deleteItem(val){
      console.log("delete item start")
      const data =     {
        userId:val.userId
      }
      if (process.env.NODE_ENV === 'production') {
        this.qtCall.JsToQt("NeedDelUser", data);//可以传给qt
        setTimeout(() => {
          console.log("refresh data start")
          this.refreshData();
        }, 200)
      }

    },
    confirmUser(){
      if(!this.user.accout){
        Message.warning('请输入账号')
        return
      }
      if(!this.user.number){
        Message.warning('请输入工号')
        return
      }
      if(!this.user.userName){
        Message.warning('请输入员工姓名')
        return
      }

      if(!this.user.role){
        Message.warning('请选择角色')
        return
      }
      if(this.type===1){
        const data1 = {
          userId:this.user.accout,//账号
          userOtherID:this.user.number,//工号
          userName:this.user.userName,//用户名称
          userType:this.user.role,//用户权限
          fingerprint:"",//指纹
          idCard:"",//卡号
          passwd:this.user.passwd, //密码
          des:""//备注

        }
        console.log(data1)
        this.qtCall.JsToQt("NeedAddUser", data1);//可以传给qt
        this.qtCall.JsToQt("NeedQueryUsersList", '');//可以传给qt
        this.qtCall.QtToJs.connect((func,json) => {
          if(func=="RefreshUsersList"){
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              this.userData = datas.data.user
            }
          }
        })
      }
      if(this.type===2){

      }

      this.userVisible = false
    },
    addUser(){
      this.type = 1
      this.userVisible = true
    },
    checkMenu(index){
      this.selectMenu = index
    },

  },

}
</script>
<style scoped lang="less">
.main_bottom{
  display: flex;
  flex: 1;
  flex-direction: row;
  background-color: #fff;

  border-bottom: 3px solid #ECEEF1;
  height: calc(100% - 90px);
  .main_left{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 180px;
    border-right:3px solid #ECEEF1;
    .menu_item{
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 16px;
      font-weight: 600;
      border-bottom: 1px solid #ECEEF1;
      cursor: pointer;
    }
  }
  .form{
    /deep/ .el-select {
      width: 100%;
    }
  }
  .main_right{
    flex: 1;
    background-color: #F0F3F8;
    display: flex;
    .main_content{
      height: 100%;
      display: flex;
      flex: 1;
      padding: 0;
      flex-direction: column;

      .main_table{
        display: flex;
        height: calc(100% - 0px);
        /deep/ .el-table .el-table__cell{
          padding: 0px;
          height: 40px;
        }
        /deep/ .el-table .cell{
          padding: 0px;
          text-indent: 10px;
        }
        /deep/ .el-table--border{
          overflow-y: auto;
        }
      }
      .content_top{
        flex-direction: row-reverse;

        .content_list{
          display: inline-block;
          line-height: 1;
          white-space: nowrap;
          cursor: pointer;
          background: #FFF;
          border: 1px solid #DCDFE6;
          color: #606266;
          -webkit-appearance: none;
          text-align: center;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          outline: 0;
          margin: 0;
          -webkit-transition: .1s;
          transition: .1s;
          font-weight: 500;
          padding: 12px 20px;
          font-size: 14px;
          border-radius: 4px;
        }
      }
    }
  }

}





</style>
